import React from 'react'
import { useAuth } from '../../contexts/AuthProvider'
import { Button } from '../ui/Button'
import { Sparkles, ArrowRight, BookOpen, Bell, BarChart3 } from 'lucide-react'

interface WelcomeStepProps {
  onNext: () => void
}

export function WelcomeStep({ onNext }: WelcomeStepProps) {
  const { userProfile } = useAuth()

  const features = [
    {
      icon: <BookOpen className="h-6 w-6" />,
      title: 'Personalized Recommendations',
      description: 'Get papers tailored to your research interests and reading history'
    },
    {
      icon: <Bell className="h-6 w-6" />,
      title: 'Smart Alerts',
      description: 'Never miss important papers with intelligent notification system'
    },
    {
      icon: <BarChart3 className="h-6 w-6" />,
      title: 'Reading Analytics',
      description: 'Track your research progress and discover reading patterns'
    }
  ]

  return (
    <div className="bg-white rounded-xl shadow-sm p-8 text-center">
      <div className="mb-8">
        <div className="w-20 h-20 bg-gradient-to-br from-blue-500 to-purple-600 rounded-full flex items-center justify-center mx-auto mb-6">
          <Sparkles className="h-10 w-10 text-white" />
        </div>
        
        <h1 className="text-3xl font-bold text-gray-900 mb-4">
          Welcome to ArXiv+, {userProfile?.display_name || userProfile?.full_name}!
        </h1>
        
        <p className="text-lg text-gray-600 max-w-2xl mx-auto">
          Let's personalize your research experience to help you discover the most relevant 
          papers and stay up-to-date with your field.
        </p>
      </div>

      <div className="grid md:grid-cols-3 gap-6 mb-8">
        {features.map((feature, index) => (
          <div key={index} className="p-6 border border-gray-200 rounded-lg">
            <div className="text-blue-600 mb-4 flex justify-center">
              {feature.icon}
            </div>
            <h3 className="font-semibold text-gray-900 mb-2">{feature.title}</h3>
            <p className="text-sm text-gray-600">{feature.description}</p>
          </div>
        ))}
      </div>

      <div className="space-y-4">
        <p className="text-gray-600">
          This setup will take about 3 minutes and will help us provide you with 
          the best possible research experience.
        </p>
        
        <Button 
          size="lg" 
          onClick={onNext}
          className="px-8"
        >
          Get Started <ArrowRight className="ml-2 h-4 w-4" />
        </Button>
        
        <p className="text-sm text-gray-500">
          You can always change these preferences later in settings
        </p>
      </div>
    </div>
  )
}